import React from 'react'
import '../../layer.css'
import {Button, Input, Grid, Loading, Icon} from "@hi-ui/hiui";
import ReactECharts from "echarts-for-react";
import {loadUserRecommendDataFirst, getUserAllRecommend} from "../../action";
import {messageModal} from "../../../../common/date";

const {Row, Col} = Grid


const precisiondata = [
    ['product', 'CF_USER_CHECK', 'CF_USER_FREQ', 'USER_WPR'],
    ['N=5', 0.036, 0.028, 0.159],
    ['N=10', 0.021, 0.016, 0.0849],
    ['N=15', 0.0139, 0.0106, 0.0566]
]

const recalldata = [
    ['product', 'CF_USER_CHECK', 'CF_USER_FREQ', 'USER_WPR'],
    ['N=5', 0.009, 0.0105, 0.0105],
    ['N=10', 0.007, 0.008, 0.0106],
    ['N=15', 0.0399, .04249, 0.04249]
]

class UserModelDiff extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            userId: '',
            venueId: '',
            topK: 5,
            diffData: [],
            loadingBtn: false,
            backgroundColor: '#fa7a84',
            precision: [],
            recall: []
        }
    }


    async componentDidMount() {
        this.loadRecommendDataFirst()
    }

    loadRecommendData() {
        const {userId, venueId, topK} = this.state
        if (userId && venueId && topK) {
            this.setState({
                loadingBtn: true
            })
            getUserAllRecommend({userId, venueId, topK}).then(res => {
                console.log(res)
                if (res.code === 200) {
                    var list = res.data
                    var data = []
                    for (let i = 0; i < list.length; i++) {
                        var list1 = list[i]
                        for (let j = 0; j < list1.list.length; j++) {
                            data.push({
                                type: list1.type,
                                value: [list1.list[j][0], list1.list[j][1]]
                            })
                        }
                    }
                    this.setState({
                        diffData: data
                    })
                }
            }).finally((r) => {
                this.setState({
                    loadingBtn: false
                })
            })
        } else {
            messageModal('error', '相关参数前填写完整')
        }

    }

    loadRecommendDataFirst() {
        loadUserRecommendDataFirst().then(res => {
            if (res.code === 200) {
                this.setState({
                    backgroundColor: '#35a55d'
                })
            }
        })
    }

    loadUserDiffChart() {
        const {diffData} = this.state

        return {
            bmap: {
                center: [-73.9792, 40.7695],
                zoom: 11,
                roam: true,
                mapStyle: {
                    styleJson: [
                        {
                            featureType: 'water',
                            elementType: 'all',
                            stylers: {
                                color: '#d1d1d1'
                            }
                        },
                        {
                            featureType: 'land',
                            elementType: 'all',
                            stylers: {
                                color: '#f3f3f3'
                            }
                        },
                        {
                            featureType: 'railway',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'highway',
                            elementType: 'all',
                            stylers: {
                                color: '#fdfdfd'
                            }
                        },
                        {
                            featureType: 'highway',
                            elementType: 'labels',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'arterial',
                            elementType: 'geometry',
                            stylers: {
                                color: '#fefefe'
                            }
                        },
                        {
                            featureType: 'arterial',
                            elementType: 'geometry.fill',
                            stylers: {
                                color: '#fefefe'
                            }
                        },
                        {
                            featureType: 'poi',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'green',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'subway',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'manmade',
                            elementType: 'all',
                            stylers: {
                                color: '#d1d1d1'
                            }
                        },
                        {
                            featureType: 'local',
                            elementType: 'all',
                            stylers: {
                                color: '#d1d1d1'
                            }
                        },
                        {
                            featureType: 'arterial',
                            elementType: 'labels',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'boundary',
                            elementType: 'all',
                            stylers: {
                                color: '#fefefe'
                            }
                        },
                        {
                            featureType: 'building',
                            elementType: 'all',
                            stylers: {
                                color: '#d1d1d1'
                            }
                        },
                        {
                            featureType: 'label',
                            elementType: 'labels.text.fill',
                            stylers: {
                                color: '#999999'
                            }
                        }
                    ]
                }
            },
            series: [
                {
                    type: 'scatter',
                    coordinateSystem: 'bmap',
                    polyline: true,
                    data: diffData,
                    itemStyle: {
                        color: function (params) {
                            var ty = params.data.type
                            if (ty === 'self')
                                return '#e31830';
                            else if (ty === 'check')
                                return '#3073f8';
                            else if (ty === 'freq')
                                return '#03a739';
                            else
                                return '#b809e5';
                        }
                    }
                }
            ]
        }
    }

    loadPrecisonChart() {
        const {precision} = this.state
        return {
            title: {
                text: '用户-准确率',
                subtext: '@Precison'
            },
            grid: {
                y: 80,
                x2: 60
            },
            legend: {},
            tooltip: {},
            dataset: {
                source: precision
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
        }
    }

    loadRecallChart() {
        const {recall} = this.state
        return {
            title: {
                text: '用户-召回率',
                subtext: '@Precison'
            },
            grid: {
                y: 80,
                x2: 60
            },
            legend: {},
            tooltip: {},
            dataset: {
                source:recall
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
        }
    }


    render() {
        const {userId, venueId, topK} = this.state

        return (
            <div className={'recommendationbody'}>
                <div className={'algorithmparam'}>
                    <Row justify='center' gutter={true}>
                        <Col>
                            <Button type="default"
                                    style={{outline: 'none', border: 'none', opacity: 0.5}}>
                                模拟用户
                            </Button>
                            <Input placeholder="输入模拟用户ID号"
                                   type={"tel"}
                                   clearable={true}
                                   value={userId}
                                   onChange={(e, val) => {
                                       this.setState({userId: val})
                                   }}
                                   bordered={false}
                                   style={{width: 200, height: 32, margin: 'auto 10px auto 10px'}}/>
                            <Button type="default"
                                    style={{outline: 'none', border: 'none', opacity: 0.5}}>
                                模拟地名
                            </Button>
                            <Input placeholder="输入模拟地名ID"
                                   type={"tel"}
                                   clearable={true}
                                   bordered={false}
                                   value={venueId}
                                   style={{width: 150, height: 32, margin: 'auto 10px auto 10px'}}
                                   onChange={(e, val) => {
                                       this.setState({venueId: val})
                                   }}/>
                            <Button type="default"
                                    style={{outline: 'none', border: 'none', opacity: 0.5}}>
                                推荐单数
                            </Button>
                            <Input placeholder="输入推荐数量"
                                   type={"tel"}
                                   clearable={true}
                                   bordered={false}
                                   value={topK}
                                   style={{width: 150, height: 32, margin: 'auto 10px auto 10px'}}
                                   onChange={(e, val) => {
                                       this.setState({topK: val})
                                   }}/>
                            <Button type="primary"
                                    loading={this.state.loadingBtn}
                                    onClick={() => {
                                        this.loadRecommendData()
                                    }}>
                                查询
                            </Button>
                        </Col>
                    </Row>
                </div>
                <div className={'userDiff'}>
                    <div>
                        <span style={{color: 'red'}}>红色标记点</span>
                        <span style={{color: 'green'}}>绿色普通推荐点</span>
                        <span style={{color: 'purple'}}>紫色增强推荐点</span>
                    </div>
                    <ReactECharts
                        style={{height: "350px"}}
                        option={this.loadUserDiffChart()}/>
                </div>
                <Row gutter={true}>
                    <Col span={12}>
                        <div className={'final_p_r'}>
                            <div style={{float: 'right',zIndex:99,position:"relative"}}>
                                <Icon name="update" style={{color: '#3f8e50', fontSize: '20px'}} onClick={() => {
                                    this.setState({
                                        precision: this.state.precision.length>0?[]:precisiondata
                                    })
                                }}/>
                            </div>
                            <ReactECharts
                                // style={{height: "350px"}}
                                option={this.loadPrecisonChart()}/>
                        </div>
                    </Col>
                    <Col span={12}>
                        <div className={'final_p_r'}>
                            <div style={{float: 'right',zIndex:99,position:"relative"}}>
                                <Icon name="update" style={{color: '#3b953f', fontSize: '20px'}} onClick={() => {
                                    this.setState({
                                        recall: this.state.recall.length>0?[]:recalldata
                                    })
                                }}/>
                            </div>
                            <ReactECharts
                                // style={{height: "350px"}}
                                option={this.loadRecallChart()}/>
                        </div>
                    </Col>
                    <div style={{clear: 'both'}}/>
                </Row>
                <div className={'loadUserCahce'} style={{backgroundColor: this.state.backgroundColor}}>
                </div>
            </div>
        )
    }
}

export default UserModelDiff
